<template>
  <div
    class="price"
    :class="[
      `${market ? 'market-price' : ''}`,
      `${fw && !market ? 'fw' : ''}`,
      `${!color ? colorClass : ''}`,
    ]"
    :style="[`font-size:${size}`, `${color ? 'color:' + color : ''}`]"
  >
    <span class="price-icon">￥</span>
    <span>{{ value }}</span>
  </div>
</template>
  <script lang="ts">
export default {
  name: "money",
};
</script>
  <script lang="ts" setup>
import { ref } from "vue";

const props = withDefaults(
  defineProps<{
    value?: number | string;
    color?: string;
    colorClass?: string;
    size?: string;
    fw?: boolean;
    market?: boolean;
  }>(),
  {
    value: 0.0,
    colorClass: "var(--base-red)",
    color: "",
    size: "12px",
    fw: false,
    market: false,
  }
);
</script>
  
  <style scoped>
.price {
  position: relative;
  /* display: flex;
    align-items: baseline; */
}
.price-icon {
  font-size: 65%;
}

.market-price {
  position: relative;
  color: var(--base-grey);
  /* display: flex; */
  /* box-sizing: border-box; */
  /* align-items: baseline; */
  text-decoration: line-through;
}

.market-price-icon {
  font-size: 65%;
}
</style>